<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>总价格：{{totalprice}}</p>
        <p>单价：{{price}}</p>
        <p>数量：{{num}}</p>
        <p>折扣：70%{{zk}}</p>
        <div>
            <button @click="num==0?0:num--">减少数量：</button>
            <button @click="num++">增加数量：</button>
            <button @click="price=price%0.7">折扣</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                price:20,
                num:0
            },
            computed:{
                totalprice(){
                    return this.price * this.num;
                }
            }
        });
    </script>
</body>
</html>